<template style="height: 100%;">
	<!-- 设置导航栏 -->
	<van-sticky>
		<van-nav-bar title="登录" left-arrow @click-left="onClickLeft" />
	</van-sticky>
	<div class="contain">
		<img class="imgs" id="pic" :src="imgArr[0]">
		<!-- 登录界面表单 -->
		<van-form @submit="onSubmit">

			<!-- 输入框 -->
			<van-cell-group inset>
				<van-field @click="one()" v-model="username" name="username" label="用户名" placeholder="请输入用户名"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<van-field @click="two()" v-model="password" type="password" name="password" label="密码" placeholder="请输入密码"
					:rules="[{ required: true, message: '请填写密码' }]" />
			</van-cell-group>

			<!-- 复选框 -->
			<div class="checkbox">
				<van-checkbox v-model="checked" shape="square" checked-color="#FFB5C5">记住密码
					<a href="http://wwww.baidu.com"
						style="color: #FFB5C5 ;position: absolute; right: 0; margin-right: 4%;">忘记密码?</a>
				</van-checkbox>
			</div>

			<!-- 登录注册按钮 -->
			<router-link to="/regist">
				<van-button plain round color="#FFB5C5" style="width: 46%; margin-left: 2.5%;">
					注册
				</van-button>

			</router-link>
			<van-button round color="#FFB5C5" style="width: 46%; float: right; margin-right: 2.5%;"
				native-type="submit">
				登录
			</van-button>

		</van-form>
	</div>
</template>

<script lang="ts" setup>
	import {
		ref
	} from 'vue';
	import {
		Toast
	} from 'vant';
	import 'vant/es/toast/style';
	import {
		login
	} from "@/api/user.ts";
	import router from '@/router';
	import {
		useUsersStore
	} from '@/store/user'

	const checked = ref(true)
	const onClickLeft = () => history.back();

	var imgArr = [
		"src/assets/images/login.png",
		"src/assets/images/login_passwd.png"
	];

	function one() {
		const msg = document.getElementById("pic");
		msg.src = imgArr[0];
	};

	function two() {
		const msg = document.getElementById("pic");
		msg.src = imgArr[1];
	}


	// 验证登录有效性
	const store = useUsersStore()
	const username = ref("")
	const password = ref("")
	const onSubmit = (data) => {
		console.log("login on Submit")
		store.login(data)
			.then(res => {
				console.log(res)
				if (res.code == 0) {
					Toast.success('登录成功')
					// store.getName(res.data.username)
					// localStorage.setItem("username1",res.data.username)
					router.push({
						name: "home",
						query: {
							date: new Date().getTime()
						}
					})
				} else {
					Toast.fail('登录失败\n'+res.message)
					console.log(res.message)
				}

			})
			.catch(err => {
				console.log("出错了~", err)
			})
	}
</script>


<style>
	* {
		font-size: 16px;
	}

	html,body,#app {
		height: 100%;
	}

	.contain {
		height: 100%;
		background-color: #F0F8FF;
	}

	:root {
		--van-button-round-border-radius: 5px;
		--van-nav-bar-background-color: #FFB5C5;
		--van-nav-bar-height: 72px;
		--van-nav-bar-title-text-color: white;
		--van-nav-bar-title-font-size: 20px;
		--van-nav-bar-arrow-size: 20px;
		--van-checkbox-size: 16px
	}

	.van-icon-arrow-left {
		color: var(--nav-bar-icon-color, #FFF) !important;
	}

	.imgs {
		display: block;
		margin: 0 auto;
		width: 95%;
	}

	.checkbox {
		margin: 2% 2.5%
	}
</style>
